I have the following:

for (var i = 0; i < children.length; i++){ if(hasClass(children[i], "lbExclude")){ children[i].parentNode.removeChild(children[i]); } };

I would like it to loop through all children's children, etc (not just the top level). I found this line, which seems to do that:

for(var m = n.firstChild; m != null; m = m.nextSibling) {

But I'm unclear on how I refer to the current child if I make that switch? I would no longer have i to clarify the index position of the child. Any suggestions?

Thanks!

Update:

I'm now using the following, according to answer suggestions. Is this the correct / most efficient way of doing so?

function
 removeTest(child) { if (hasClass(child, "lbExclude")) { child.parentNode.removeChild(child); } } function
 allDescendants(node) { for (var i = 0; i < node.childNodes.length; i++) { var child = node.childNodes[i]; allDescendants(child); removeTest(child); } } var children = temp.childNodes; for (var i = 0; i < children.length; i++) { allDescendants(children[i]); };

Share a link to this question (Includes your user id)

CC BYSA 3.0

Edit

edited Aug 27, 2017 at 9:30

Mosh Feu

29k1616 gold badges9292 silver badges138138 bronze badges

asked Apr 26, 2010 at 8:53

MatrymMatrym

17k3535 gold badges9797 silver badges141141 bronze badges

Do you know how many arrays you have nested here?
– thecoshman
Commented Apr 26, 2010 at 8:56
Simply by the name m: m.parentNode.removeChild(m). There might be a problem, though, because removing a node and then taking its nextSibling (in the for clause) will not work as intended.
– Dirk
Commented Apr 26, 2010 at 8:58
@coshman, the amount of nested children will be variable.
– Matrym
Commented Apr 26, 2010 at 9:03
@dirk I didn't think of that. Do you have a proposed way of dealing with that problem?
– Matrym
Commented Apr 26, 2010 at 9:04

Add a comment |

Start a bounty

11 Answers 11

Sorted by: Reset to default

function
 allDescendants (node) { for (var i = 0; i < node.childNodes.length; i++) { var child = node.childNodes[i]; allDescendants(child); doSomethingToNode(child); } }

You loop over all the children, and for each element, you call the same function and have it loop over the children of that element.

Share a link to this answer (Includes your user id)

CC BYSA 2.5

Edit

edited Apr 26, 2010 at 9:20

answered Apr 26, 2010 at 8:56

QuentinQuentin

937k132132 gold badges1.2k1.2k silver badges1.4k1.4k bronze badges

Sorry, could you be more explicit about how to apply this function in my case?
– Matrym
Commented Apr 26, 2010 at 9:02
I think a more modern version of this would be function allDescendants (node) { node.childNodes.forEach(child => { allDescendants(child); doSomethingToNode(child); }); }
– bobajeff
Commented Nov 22, 2020 at 7:32

Add a comment |

Normally you'd have a function that could be called recursively on all nodes. It really depends on what you want to do to the children. If you simply want to gather all descendants, then element.getElementsByTagName may be a better option.

var all = node.getElementsByTagName('*'); for (var i = 1, l = all.length; ++i < l;) { removeTest(all[i]); }

Share a link to this answer (Includes your user id)

CC BYSA 2.5

Edit

answered Apr 26, 2010 at 9:09

JamesJames

111k3232 gold badges163163 silver badges177177 bronze badges

1

This will only get elements, not all nodes.
– Quentin
Commented Apr 26, 2010 at 9:19
3

They are tested by a hasClass method however, so I believe they intend it to be elements.
– wombleton
Commented Apr 26, 2010 at 9:36

Add a comment |

There's no need for calling the 'allDescendants' method on all children, because the method itself already does that. So remove the last codeblock and I think that is a proper solution (á, not thé =])


 function
 removeTest(child){ if(hasClass(child, "lbExclude")){ child.parentNode.removeChild(child); } } function
 allDescendants (node) { for (var i = 0; i < node.childNodes.length; i++) { var child = node.childNodes[i]; allDescendants(child); removeTest(child); } } var children = allDescendants(temp);

Share a link to this answer (Includes your user id)

CC BYSA 2.5

Edit

answered Apr 26, 2010 at 9:28

Robbert van den BogerdRobbert van den Bogerd

1,02488 silver badges2626 bronze badges

The 'childNodes' it's was missing for me. Thanks a lot!
– Andre Carneiro
Commented Feb 6, 2022 at 19:52

Add a comment |

You can use BFS to find all the elements.

function(element) { // [].slice.call() HTMLCollection to Array
 var children = [].slice.call(element.children), found = 0; while (children.length > found) { children = children.concat([].slice.call(children[found].children)); found++; } return children; };

This function returns all the children's children of the element.

Share a link to this answer (Includes your user id)

CC BYSA 3.0

Edit

answered Feb 2, 2017 at 10:28

androbinandrobin

1,7091717 silver badges3232 bronze badges

Add a comment |

To get all descendants as an array, use this:

function
 getAllDescendants(node) { var all = []; getDescendants(node); function
 getDescendants(node) { for (var i = 0; i < node.childNodes.length; i++) { var child = node.childNodes[i]; getDescendants(child); all.push(child); } } return all; }

Share a link to this answer (Includes your user id)

CC BYSA 4.0

Edit

answered Aug 5, 2019 at 14:56

Oded BreinerOded Breiner

29.5k1010 gold badges108108 silver badges7474 bronze badges

Add a comment |

The most clearcut way to do it in modern browsers or with babel is this. Say you have an HTML node $node whose children you want to recurse over.

Array.prototype.forEach.call($node.querySelectorAll("*"), function(node) { doSomethingWith(node); });

The querySelectorAll('*') on any DOM node would give you all the child nodes of the element in a NodeList. NodeList is an arraylike object, so you can use the Array.prototype.forEach.call to iterate over this list, processing each child onebyone within the callback.

Share a link to this answer (Includes your user id)

CC BYSA 4.0

Edit

answered May 31, 2018 at 11:56

kumarharshkumarharsh

19.4k88 gold badges7474 silver badges100100 bronze badges

1

I'm sorry for my ignorance! But, '$node' requires something like JQuery? Is this solution valid for a 'vanilla' javascript code?
– Andre Carneiro
Commented Feb 6, 2022 at 19:54
1

No, $node is just a variable name holding an HTMLNode don't get confused by the $ sign any variable can have a $ in it.
– kumarharsh
Commented Feb 8, 2022 at 19:20

Add a comment |

If you have jquery and you want to get all descendant elements you can use:


 var all_children= $(parent_element).find('*');

Just be aware that all_children is an HTML collection and not an array. They behave similarly when you're just looping, but collection doesn't have a lot of the useful Array.prototype methods you might otherwise enjoy.

Share a link to this answer (Includes your user id)

CC BYSA 3.0

Edit

answered Jun 8, 2015 at 20:24

LukeLuke

5,69855 gold badges3838 silver badges6868 bronze badges

Add a comment |

if items are being created in a loop you should leave a index via id="" dataname or some thing. You can then index them directly which will be faster for most functions such as (!F). Works pretty well for 1024 bits x 100 items depending on what your doing.

if ( document.getElementById( cid ) ) { return; } else { what you actually want }

this will be faster in most cases once the items have already been loaded. only scrub the page on reload or secure domain transfers / logins / cors any else and your doing some thing twice.

Share a link to this answer (Includes your user id)

CC BYSA 4.0

Edit

answered Dec 15, 2018 at 13:51

user10794722user10794722

1111 bronze badge

Add a comment |

If you use a js library it's as simple as this:

$('.lbExclude').remove();

Otherwise if you want to acquire all elements under a node you can collect them all natively:

var nodes = node.getElementsByTagName('*'); for (var i = 0; i < nodes.length; i++) { var n = nodes[i]; if (hasClass(n, 'lbExclude')) { node.parentNode.removeChild(node); } }

Share a link to this answer (Includes your user id)

CC BYSA 2.5

Edit

answered Apr 26, 2010 at 9:35

wombletonwombleton

8,35611 gold badge2929 silver badges3030 bronze badges

whoops, didn't see @JP's answer.
– wombleton
Commented Apr 26, 2010 at 9:37

Add a comment |

TreeNode node = tv.SelectedNode; while (node.Parent != null) { node = node.Parent; } CallRecursive(node); private void
 CallRecursive(TreeNode treeNode) { foreach (TreeNode tn in treeNode.Nodes) { //Write whatever code here this function recursively loops through all nodes 
 CallRecursive(tn); } }

Share a link to this answer (Includes your user id)

CC BYSA 4.0

Edit

edited Apr 6, 2022 at 17:14

Gust van de Wal

5,29111 gold badge2525 silver badges5151 bronze badges

answered Mar 11, 2020 at 18:29

Ali ChowdhuryAli Chowdhury

155 bronze badges

Add a comment |

The basic idea is remember that DOM is a tree structure. So, using the recursive approach, the idea is:

Process parent obj;
If obj has children(doesn't matter how many), iterate the children using childNodes function;
Inside iteration, call the same function recursively passing the child object

Ex:

function
 doSomething(obj) { // Processing parent obj here
 if(obj.childNodes !== undefined && obj.childNodes !== null) { obj.childNodes.forEach((c) => { doSomething(c) }) } }

Note that the 'obj' parameter on doSomething inside the iteration is actually the 'child' object. Thus, you are processing the child node for each interation which means at the end of the loop and all recursive calls, this code will process all nodes in the tree starting from 'obj'.

I hope it helps!

Share a link to this answer (Includes your user id)

CC BYSA 4.0

Edit

answered Apr 1, 2023 at 18:40

Andre CarneiroAndre Carneiro

72811 gold badge55 silver badges2929 bronze badges

Add a comment |

Not the answer you're looking for? Browse other questions tagged

javascript

recursion

loops

forloop

children

or ask your own question.

Examples

The following example shows how:

For an attribute which has a namespace prefix, getAttributeNames() returns that namespace prefix along with the attribute name.
For an attribute which has no namespace prefix, getAttributeNames() returns just the attribute name, asis.

It's important to understand that:

An attribute can be present in the DOM with a namespace but lacking a namespace prefix.
For an attribute in the DOM that has a namespace but lacks a namespace prefix, getAttributeNames() will return just the attribute name, with no indication that the attribute is in a namespace.

The example below includes such a "namespaced but without a namespace prefix" case.

const element = document.createElement("a");
 // set "href" attribute with no namespace and no namespace prefix element.setAttribute("href",
 "https://example.com");
 // set "href" attribute with namespace and also "xlink" namespace prefix element.setAttributeNS(
 "http://www.w3.org/1999/xlink",
 "xlink:href",
 "https://example.com",
 );
 // set "show" attribute with namespace but no namespace prefix element.setAttributeNS("http://www.w3.org/1999/xlink",
 "show",
 "new");
 // Iterate over element's attributes
 for
 (const name of element.getAttributeNames())
 {
 const value = element.getAttribute(name); console.log(name, value);
 }
 // logs:
 // href https://example.com
 // xlink:href https://example.com
 // show new

Specification
DOM Standardreffordomelementgetattributenames①

Specification

DOM Standardreffordomelementgetattributenames①

Browser compatibility

Report problems with this compatibility data on GitHub

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android
`getAttributeNames`

Legend

Tip: you can click/tap on a cell for more information.

Full support: Full support